<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    @close="close"
    :destroyOnClose="true"
    :dialogStyle="{ top: '50px' }"
  >
    <template slot="footer">
      <a-button type="primary" ghost @click="close">确定</a-button>
    </template>
    <a-form layout="inline" style="display: flex;justify-content: space-between">
      <a-row :gutter="24" style="display:flex">
        <a-col :span="4" style="border-right:1px dashed #3955a5;flex:2">
          <a-divider style="margin: 5px 0">模型选择</a-divider>
          <div style="width:100%;overflow:auto">
            <a-tree show-line style="width: 100%;height:70vh" :tree-data="treeData" @select="handleTreeSelect" />
          </div>
        </a-col>
        <a-col :span="20" style="flex:6" v-if="modelType">
          <template v-if="modelType == 1">
            <a-form-item label="单位">
              <a-input v-model="queryParam.depName" disabled placeholder="单位"></a-input>
            </a-form-item>
            <a-form-item label="项目">
              <a-input v-model="queryParam.proName" disabled placeholder="项目"></a-input>
            </a-form-item>
          </template>

          <template v-else>
            <a-form-item label="时间">
              <a-range-picker format="yyyy-MM-DD" value-format="yyyy-MM-DD" v-model="queryParam.date" />
            </a-form-item>
          </template>

          <a-divider style="margin: 10px 0">条件选择</a-divider>

          <div v-if="modelType == 1" style="margin: 0 auto" :class="{ isCheck: isCheck }">
            <a-row :gutter="24">
              <a-col :md="8" :sm="24" style="height: 60vh;overflow: auto;">
                <deptTree
                  v-model="queryParam.depId"
                  @getDeptName="
                    name => {
                      queryParam.depName = name
                    }
                  "
                />
              </a-col>
              <a-col :md="24 - 8" :sm="24" style="height: 60vh;overflow-x: hidden; overflow-y: auto;">
                <a-table
                  :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
                  :customRow="setRow"
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :columns="columns"
                  :dataSource="dataSource"
                  :pagination="ipagination"
                  :loading="loading"
                  @change="handleTableChange"
                >
                  <span slot="action" slot-scope="text, record">
                    <a @click="">详情</a>
                  </span>
                </a-table>
              </a-col>
            </a-row>
          </div>
          <template v-else>
            <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
          </template>
        </a-col>
      </a-row>
    </a-form>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
import deptTree from './deptTree'
import columns from './indexColumns'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import * as lodash from 'lodash'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import CheckOrganModal from './CheckOrganModal.vue'

export default {
  name: 'selectModel',
  mixins: [JeecgListMixin],
  prop: ['payload'],
  components: { deptTree, CheckOrganModal },
  data() {
    return {
      ipagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: false,
        total: 0
      },
      modelType: '',
      title: '查询条件',
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      visible: false,
      isCheck: false,
      queryParam: {
        accCode: undefined,
        accName: undefined
      },
      disableMixinCreated: true,
      columns: columns(this),
      selectedRowKeys: [],
      selectedRows: [],
      selectedKeys: [],
      treeData: [],
      url: {
        list: '/modelTeam/queryProjectList',
        selectTree: '/dataModel/queryDataModelTemplate?funcType=1,2'
      }
    }
  },
  created() {
    this.loadTree()
  },
  watch: {
    'queryParam.depId': function(val) {
      console.log(this.queryParam.depId)
      this.dataSource = []
      this.selectedRowKeys = []
      if (val) {
        this.loadData()
      }
    }
  },
  methods: {
    updateQueryParam(data) {
      console.log(data, 'data')
      let str1 = '',
        str2 = '',
        str3 = ''
      data.map(item => {
        // TODO 账套～～～
        str1 += item.id + ','
        str2 += item.accName + ','
        str3 += item.unitId + ','
      })
      if (str1.length > 0) {
        str1 = str1.substr(0, str1.length - 1)
      }
      if (str2.length > 0) {
        str2 = str2.substr(0, str2.length - 1)
      }
      if (str3.length > 0) {
        str3 = str3.substr(0, str3.length - 1)
      }
      this.queryParam.accCode = str1
      this.queryParam.accName = str2
      this.queryParam.unitId = str3
    },
    loadTree() {
      var that = this
      that.treeData = []
      getAction(this.url.selectTree).then(res => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.treeData = this.getTree(res.result, '0')
          this.loading = false
        }
      })
    },
    getTree(treeData, pid) {
      let treeArr = []
      for (let i = 0; i < treeData.length; i++) {
        let node = treeData[i]
        if (node.pid == pid) {
          let newNode = {
            title: node.modelName,
            key: node.id,
            modelType: node.modelType,
            modelType: node.modelType,
            children: this.getTree(treeData, node.id)
          }
          treeArr.push(newNode)
        }
      }
      return treeArr
    },
    handleTreeSelect(selectedKeys, event) {
      this.queryParam = this.$options.data().queryParam
      this.selectedKeys = [selectedKeys[0]]
      this.queryParam.modelId = event.node.dataRef.key
      this.queryParam.modelName = event.node.dataRef.title
      this.modelType = event.node.dataRef.modelType
    },

    setRow(record) {
      return {
        on: {
          click: () => {
            let rowKeys = []
            rowKeys.push(record.id)
            this.selectedRowKeys = rowKeys
            this.queryParam.proId = this.selectedRowKeys[0]
            this.queryParam.proName = record.projectName
            console.log(this.selectedRowKeys)
          }
        }
      }
    },
    onSelectChange(selectedRowKeys, data) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.queryParam.proId = data[0].id
      this.queryParam.proName = data[0].projectName
    },

    edit(record) {
      this.dataSource = []
      this.selectedRowKeys = []
      this.modelType = ''
      // console.log(record, 'record')
      if (record) {
        this.queryParam = record
        this.visible = true
      } else {
        this.visible = true
      }
    },
    close(isSubmit) {
      if (isSubmit) {
        this.$emit('getSelectData', this.queryParam)
        console.log(this.queryParam)
        this.visible = false
      } else {
        this.visible = false
      }
    }
  }
}
</script>
